﻿function rollDDLImages() {
    var container = $(this).parent().parent().parent();
    var ddlImages = container.children('.ddlImages');
    var ddlImagesList = ddlImages.children('div');

    var topValue = '-' + ddlImagesList.outerHeight();
    if (ddlImagesList.position().top == 0) {
        ddlImagesList.animate({ top: topValue }, 'slow');
    }
    else {
        ddlImagesList.animate({ top: '0' }, 'slow');
    }
}

function onMouseoverSelectButt() {
    $(this).addClass('hover');
}
function onMouseoutSelectButt() {
    $(this).removeClass('hover');
}

function onMouseoverDDLItem() {
    if (!$(this).hasClass('selected')) {
        $(this).css({
            "background-color": "rgb(235,235,235)",
            "color": "black"
        });
    }
}

function onMouseoutDDLItem() {
    if (!$(this).hasClass('selected')) {
        $(this).css({
            "background-color": "white",
            "color": "black"
        });
    }
}
function showSelectedImage() {
    var updateSelectedBox = $(this).parent().parent();
    updateSelectedBox.children('.display-selected-img').show();
}

function selectDDLItem() {
    var title = $(this).children('div').children('span').text();
    var ddlImagesList = $(this).parent();
    var ddlImagesContainer = ddlImagesList.parent().parent();
    ddlImagesContainer.children('.ddlImages-selected').children('div').children('.ddlImages-selector').children("input[type='text']").val(title);
    var topValue = '-' + ddlImagesList.outerHeight() + 'px';
    ddlImagesList.css({ top: topValue });
    ddlImagesContainer.children('.ddlImages-selected').children('div').children('div').children("input[type='submit']").removeAttr('disabled');
    ddlImagesContainer.children('.ddlImages-selected').children('div').children('div').children("input[type='submit']").css('color', 'black');
}


function onPagedDDLImages(panelToBeRefreshedId) {
    $(panelToBeRefreshedId).children('.ddlImages-item').bind('mouseout', onMouseoutDDLItem);
    $(panelToBeRefreshedId).children('.ddlImages-item').bind('mouseover', onMouseoverDDLItem);
    $(panelToBeRefreshedId).children('.ddlImages-item').bind('click', selectDDLItem);
}

function onSelectingImage(panelToBeRefreshedId) {
}


function onSelectedImage(panelToBeRefreshedId) {
    $(panelToBeRefreshedId).children('.ddlImages-selector').bind('click', rollDDLImages);
    $(panelToBeRefreshedId).children('.ddlImages-selector').bind('mouseout', onMouseoutSelectButt);
    $(panelToBeRefreshedId).children('.ddlImages-selector').bind('mouseover', onMouseoverSelectButt);
    $(panelToBeRefreshedId).children('.ddlImages-select-butt').children('input[type="submit"]').bind('click', showSelectedImage);
    var container = $(panelToBeRefreshedId).parent().parent();
    var dllImagesList = container.children('.ddlImages').children('div');
    dllImagesList.children('.ddlImages-item').bind('mouseout', onMouseoutDDLItem);
    dllImagesList.children('.ddlImages-item').bind('mouseover', onMouseoverDDLItem);
    dllImagesList.children('.ddlImages-item').bind('click', selectDDLItem);
    $(panelToBeRefreshedId).children('.display-selected-img').fadeIn("slow");
}

$(function () {
    $(document).mouseup(function (e) {
        var container = $(".ddlImages").children('div');
        var butt = $('.ddlImages-selector');
        var topValue = '-' + container.outerHeight() + 'px';
        if ((container.has(e.target).length === 0) && (butt.has(e.target).length === 0)) {
//            container.css({ top: topValue });
        }
    });
    $(document).ready(function () {
        $('.ddlImages-selector').bind('click', rollDDLImages);
        $('.ddlImages-selector').bind('mouseout', onMouseoutSelectButt);
        $('.ddlImages-selector').bind('mouseover', onMouseoverSelectButt);

        $('.previous-butt').bind('mouseout', onMouseoutDDLItem);
        $('.previous-butt').bind('mouseover', onMouseoverDDLItem);
        $('.inbetween-butt').children('div').bind('mouseout', onMouseoutDDLItem);
        $('.inbetween-butt').children('div').bind('mouseover', onMouseoverDDLItem);
        $('.next-butt').bind('mouseout', onMouseoutDDLItem);
        $('.next-butt').bind('mouseover', onMouseoverDDLItem);

        $('.ddlImages-item').bind('mouseout', onMouseoutDDLItem);
        $('.ddlImages-item').bind('mouseover', onMouseoverDDLItem);
        $('.ddlImages-item').bind('click', selectDDLItem);
        $('.ddlImages-select-butt').children('input[type="submit"]').bind('click', showSelectedImage);
    });
});